

// 懒加载
$(function () {
  // data-original
  $(".data_original").lazyload()
})
.lazyload();
// 上边轮播图
var mySwiper = new Swiper ('.bet_bannar', {
    // direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    disableOnInteraction:false, 
    // 如果需要前进后退按钮
    autoplay: true,
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    }
  }) 



// tab切换 多种商品
$(function () {
  // 渲染页面
  var obj = [
    ["FS201","FS927","FH6286"],
    ["FS901","FS375","FS339"],
    ["FH6232","FH6276","FH6618"],
    ["FC5910","FC5902","FC5808"],
    ["FR5235",'FR5266','FR5252'],
    ['FS2002','FS2091','FS2000'],
    ['FI9823','FI9322','FI9822']
  ]
  
  $.getJSON("../json/所有数据.json")
  .then(function (res) {
        // 返回值储存
      var  data = res.data.wapGoods;
      
      var html = "";
      var coun = 3;
      var $div = $("#info_box");
      obj.map(function (item) {
          html +=  `<div class="info_list_bet_rig">${
            item.map(function (res1) {
              
              if (coun === 1) {
                coun = 3
              }else{
                coun--
              };
              
              return `<div class="list_box list_box${coun}">
                            <div class="list_box_top">
                                <img src="./img/hg${coun}.png" alt="">
                            </div>
                            <div class="list_box_info">
                                <div class="list_box_head">
                                    <span>
                                        Top
                                        <b>${coun}</b>
                                    </span>
                                </div>
                                <div class="list_box_pic">
                                    <img src="${data[res1].pic}" alt="">
                                </div>
                                <div class="list_box_dcb">
                                    <h3>${data[res1].name}</h3>
                                    <strong>${data[res1].subTitle}</strong>
                                </div>
                            </div>
                            
                        </div>`
            }).join("")
          }
          </div>`
        })
        // 把数据放入页面
        $div.html(html)
  })
  .then(function () {
    // 获取点击的内容
    var $info_list_bet_left = $(".info_list_bet-left>.item");
    // 给第一个添加类名
    $($info_list_bet_left[0]).addClass("item_xs");
    // 获取要显示的盒子
    var $info_list_bet_rig = $(".info_list_bet_rig")
    // 给第一个添加类名
    $($info_list_bet_rig[0]).addClass("info_list_bet_rig_xs")

    // 滑动事件
    $info_list_bet_left.mouseover(function () {
      // 把所有的class名 info_list_bet_rig_xs 删除
      $info_list_bet_rig.removeClass("info_list_bet_rig_xs");
      // 删除按钮的class名
      $info_list_bet_left.removeClass("item_xs");
      // 添加对应的class名
      $($info_list_bet_rig[$info_list_bet_left.index($(this))]).addClass("info_list_bet_rig_xs")
      $(this).addClass("item_xs");
    })
  })
})
// 渲染刮胡刀
// $(function () {
//   $.ajax("")
// })
// 剃须刀 + 理发器 hover效果
$(function () {
  // 鼠标滑入top +5px
  $(".shaver_position_box").mouseover(function () {
    // 设置移入后的top值
        var $top =  parseInt($(this).css("top")) -5;
        // 更改top值
      $(this).css({
        "top": $top
      })
  })
  // 鼠标划出 - 5px 回原来位置
  $(".shaver_position_box").mouseout(function () {
    // 设置移出后的top值
    var $top =  parseInt($(this).css("top")) +5;
        // 更改top值
    $(this).css({
      "top": $top
    })
  })
})


  // <!-- 下边的轮播图 -->
 
  var mySwiper = new Swiper ('.other_container', {
    // direction: 'vertical',
    // loop: true,
    slidesPerView : 6,
    
    // 如果需要分页器
    pagination: '.swiper-pagination',
    
    // 如果需要前进后退按钮
    nextButton: '.other_button-next',
    prevButton: '.other_button-prev',
    
    // 如果需要滚动条
    // scrollbar: '.swiper-scrollbar',
  })